<template>
  <div class="bind">
    <el-form
      :inline="true"
      :model="elform"
      :rules="elRule"
      class="demo-form-inline"
      size="mini"
      ref="elform"
    >
      <el-form-item prop="roleGuidList" label="角色">
        <el-select
          v-model="elform.roleGuidList"
          placeholder="请选择时段"
          style="width:260px"
          filterable
          multiple
          clearable
          size="mini"
        >
          <el-option
            v-for="item in roleoption"
            :key="item.roleGuid"
            :label="item.roleName"
            :value="item.roleGuid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQueryt" size="mini">查询</el-button>
        <el-button type="primary" @click="bindDevice" size="mini">绑定设备</el-button>
        <el-button type="danger" @click="delDevice" size="mini">移除选中设备</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="detailslist"
      ref="table"
      border
      highlight-current-row
      :header-cell-style="headFirst"
      :cell-style="(res) => headFirst_col(res, [])"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" align="center"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="terminalName" label="设备名称"></el-table-column>
      <el-table-column prop="terminalCode" label="设备编号"></el-table-column>
      <el-table-column label="操作" align="center" width="100" v-if="isauth('access_role_edit')">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="editDialog(scope.row)" size="small">修改</el-button> -->
          <el-button
            type="text"
            @click.stop="deleteDate(scope.row)"
            size="small"
            style="color: red"
          >移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>

    <EquipmentList v-if="addframeVisible" ref="addframe" @refreshDataList="addFrame"></EquipmentList>
  </div>
</template>

<script>
import EquipmentList from './equipment-list'
export default {
  data() {
    return {
      elform: { roleGuidList: '' },
      elRule: {
        roleGuidList: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ]
      },
      roleoption: [],
      /** 表格数据*/
      searchInfo: {},
      loading: false,
      // 考勤时段数据
      detailslist: [],
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      /**设备弹窗 */
      addframeVisible: false,
      // 选中的设备信息
      selectionList: []
    }
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid
    this.getKaoqing()
  },
  components: {
    EquipmentList
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.selectionList = val
      console.log(this.selectionList)
    },
    // 打开添加设备弹窗
    bindDevice() {
      this.$refs['elform'].validate(valid => {
        if (valid) {
          this.addframeVisible = true
          this.$nextTick(() => {
            this.$refs.addframe.addinit(this.elform.roleGuidList)
          })
        } else {
          this.$message.error('请选择角色再进行操作')
        }
      })
    },
    // 确定后触发,绑定设备
    addFrame(val) {
      console.log(val)
      // 将设备绑定到时段上面去
      this.$http({
        url: this.$http.adornUrl('/attendance/attendance-frame-terminal-add'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            roleGuidList: this.elform.roleGuidList,
            unitGuid: this.changeschoolid,
            terminalGuidList: val
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '绑定设备成功',
            type: 'success'
          })
          this.getList()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 移除选中设备
    delDevice() {
      if (this.selectionList.length == 0) {
          this.$message.error('请选中需要移除的设备')
        return false
      }
      let arr = this.selectionList.map(item => {
        return { terminalGuid: item.terminalGuid, roleGuid: item.roleGuid, unitGuid:item.unitGuid }
      })
      console.log(arr)
      this.$confirm('此操作将永久移除选中数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              '/attendance/attendance-frame-terminal-batch-delete'
            ),
            method: 'post',
            data: this.$http.adornData({
              messageContent: arr,
              messageType: 0
            })
          }).then(({ data }) => {
            console.log(data)
            if (data.messageCode == 200) {
              this.selectionList = []
              this.$message({
                message: '批量移除设备成功',
                type: 'success'
              })
              this.getList()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        })
        .catch(() => {})
    },
    // 移除单个设备
    deleteDate(row) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              '/attendance/attendance-frame-terminal-delete'
            ),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                roleGuid: row.roleGuid,
                terminalGuid: row.terminalGuid,
                unitGuid: this.changeschoolid
              },
              messageType: 0
            })
          }).then(({ data }) => {
            console.log(data)
            if (data.messageCode == 200) {
              this.$message({
                message: '移除设备成功',
                type: 'success'
              })
              this.getList()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        })
        .catch(() => {})
    },
    // 得到单位考勤时段
    getKaoqing() {
      this.$http({
        url: this.$http.adornUrl('/attendance/attendance-role-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.roleoption = data.messageContent || []
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },

    /**
     * 数据查询
     */
    onQueryt() {
      this.$refs['elform'].validate(valid => {
        if (valid) {
          this.pageNum = 1
          this.searchInfo.roleGuidList = this.elform.roleGuidList
          this.searchInfo.unitGuid = this.changeschoolid
          this.getList()
        } else {
          this.$message.error('请选择角色再进行操作')
        }
      })
    },
    getList() {
      this.searchInfo.unitGuid = this.changeschoolid
      this.$http({
        url: this.$http.adornUrl('/attendance/attendance-frame-terminal-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.detailslist = data.messageContent.data || []
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          if (this.detailslist.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message({
            message: '请选择角色再进行操作',
            type: 'error',
            duration: 100
          })
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.bind {
  padding: 10px;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
